<template>
  <div>
    <!-- <el-row class="top">
      <el-col :span="8">
        <el-button type="success">新增</el-button>
        <el-button type="info">批量删除</el-button>
      </el-col>
      <el-col :span="16">
        <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="姓名" value="name"></el-option>
            <el-option label="性别" value="gd"></el-option>
            <el-option label="学历" value="xl"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-table :data="list" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="#" width="50"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="age" label="年龄" width="120"></el-table-column>
      <el-table-column prop="gd" label="性别" width="120"></el-table-column>
      <el-table-column prop="ah" label="爱好" width="150"></el-table-column>
      <el-table-column prop="xl" label="学历" width="120"></el-table-column>
      <el-table-column label="照片" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="handleClick(scope.row)" size="small">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // list: this.$store.state.arr,
      // multipleSelection: [],
      // input:"",
      // select:""
    };
  },
  // mounted() {
  //   console.log(this.list);
  // },
  // methods: {
  //   handleClick(vl) {
  //     console.log(vl);
  //   },
  //   handleSelectionChange(val) {
  //     this.multipleSelection = val;
  //   }
  // },
  layout: "main",
  async fetch({ $axios, store }) {
    const { data } = await $axios.get(
      "http://localhost:3001/users/user-list?pageSize=10"
    );
    
  }
  // async asyncData({$axios}){
  //     let {data}=await $axios.get("http://localhost/api.php/tpsc/tpsc?transform=1")
  //     // console.log(r)
  //     return { list:data.tpsc}
  // }
};
</script>

<style scoped>
    .top {
        margin-bottom: 10px;
    }
</style>

<style >
.el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>